<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>js练习</title>
    <style>
        body,h3{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100%;
            height: 768px;
            position: relative;
        }

        h3 button{
            width: 100px;
            height: 30px;
            background: #f40;
            border: none;
            color: #fff;
            margin-left: 20px;
        }

        .warp{
            width: 130px;
            height: 130px;
            border: 3px solid #333;
        }

        .zzc{
            width: 100%;
            height: 768px;
            position: absolute;
            top: 0px;
            left: 0px;
            background-color:rgb(0,0,0,0.25);
            display: none;
        }
        .szjm{
            width: 300px;
            height: 260px;
            margin: 150px auto;
            border: 10px solid #fefefe;

        }
        .szjm p{
            line-height: 40px;
        }
        .szjm p span{
            display: inline-block;
            width: 150px;
            text-align: center;
        }
        .szjm p:nth-of-type(1) button{
             width: 40px;
             height:40px;
            margin-right: 5px;
            color: #fff;
            border: none;
         }
        .szjm p:nth-of-type(1) button:nth-of-type(1){
               background-color:red ;
           }
        .szjm p:nth-of-type(1) button:nth-of-type(2){
            background-color:yellow ;
        }
        .szjm p:nth-of-type(1) button:nth-of-type(3){
            background-color:blue ;
        }
        .szjm p:nth-of-type(2) button,.szjm p:nth-of-type(3) button{
            width: 45px;
            height:45px;
        }
        .szjm p:nth-of-type(4){
            text-align: center;
        }
        .szjm p:nth-of-type(4) button{
            color: #fff;
            width: 80px;
            height: 30px;
            border: none;
            background-color:blueviolet ;
            margin-left: 5px;
        }
    </style>
    <script type="text/javascript">

        window.onload=function(){
            var warp= document.getElementById("warp");
            var zzc=document.getElementById("zzc");
        }
        function djsz(){
            zzc.style.display='block';
        }

        function szColor(color){

            warp.style.background=color;
        }
        function seWidth(num){
            warp.style.width=num;
        }
        function szHeight(num){
            warp.style.height=num;
        }
        function fh(){
            warp.style.width='130px';
            warp.style.height='130px';
            warp.style.background='none';
        }
        function qd(){
            zzc.style.display='none';
        }
    </script>
</head>
<body>
<div class="box">
    <h3>请为下面的div设置样式<button onclick="djsz()">点击设置</button></h3>
    <div class="warp" id="warp">

    </div>
    <div class="zzc" id="zzc">
        <div class="szjm">
            <p><span>请选择背景色：</span>
                <button onclick="szColor('red')">红</button>
                <button onclick="szColor('yellow')">黄</button>
                <button onclick="szColor('blue')">蓝</button>
            </p>
            <p><span>请选择宽（px）：</span>
                <button onclick="seWidth('200px')">200</button>
                <button onclick="seWidth('300px')">300</button>
                <button onclick="seWidth('400px')"> 400</button></p>
            <p><span>请选择高（px）：</span>
                <button onclick="szHeight('200px')">200</button>
                <button onclick="szHeight('300px')">300</button>
                <button onclick="szHeight('400px')"> 400</button>
            </p>
            <p>
                <button onclick="fh()">恢复</button>
                <button onclick="qd()">确定</button>
            </p>
        </div>

    </div>
</div>
</body>
</html>